/**
 * Created by aa on 2016/7/5.
 */
'use strict';
var React = require('react');
var ReButton = require('./ReButton.jsx');

class Pager extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            pageValue: 0
        };
        this.onChangeAndSetStates = this.onChangeAndSetStates.bind(this);
        this.renderNumbers = this.renderNumbers.bind(this);
        this.handleChange=this.handleChange.bind(this);
        this.handleValue=this.handleValue.bind(this);
    }

    //换页
    onChangeAndSetStates(activePage) {
        //将当前页控制在大于0小于页数的范围
        if(activePage>this.props.totalPage||activePage<=0){
            return;
        }
        this.props.onChangePage(activePage);
    }


    //渲染按钮
    renderNumbers() {
        let page=this.props.page;
        let totalPage = this.props.totalPage;
        //总页数小于5
        if (totalPage <= 5) {
            return Array.from({length: totalPage}, (x, i)=> {
                ++i;
                return <li className={i==page?"active":"normal"} key={"pager"+i} onClick={()=>{this.onChangeAndSetStates(i)}}><a >{i}</a></li>
            })
        }
        else {
            //当前页数小于5
            if (page <= 5) {
                return Array.from({length: 6}, (x, i)=> {
                    ++i;
                    return i < 6 ? <li className={i==page?"active":"normal"} key={"pager"+i} onClick={()=>{this.onChangeAndSetStates(i)}}><a >{i}</a></li> :<li className="Omission" key={"pager"+i}>...</li>
                })
            }
            else {
                //当前页数处于最后5页
                if (page > totalPage - 5) {
                    return Array.from({length: 6}, (x, i)=> {
                        ++i;
                        return i > 1 ?<li className={totalPage - 6+i==page?"active":"normal"} key={"pager"+i} onClick={()=>{this.onChangeAndSetStates(totalPage - 6+i)}}><a >{totalPage - 6+i}</a></li> :<li className="Omission" key={"pager"+i}>...</li>
                    })
                }
                else {
                    //前后省略，留下中间
                    if (totalPage > page + 2) {
                        return Array.from({length: 9}, (x, i)=> {
                            ++i;
                            if (i == 1 || i == 2) {
                                return <li className={i==page?"active":"normal"}  key={"pager"+i}  onClick={()=>{this.onChangeAndSetStates(i)}}><a>{i}</a></li>
                            }
                            else {
                                if (i >= 4 && i <= 8) {
                                    return <li className={i==6?"active":"normal"} key={"pager"+i}  onClick={()=>{this.onChangeAndSetStates(page+i-6)}}><a>{page+i-6}</a></li>
                                }
                                else {
                                    return <li className="Omission" key={"pager"+i}>...</li>
                                }
                            }
                        })
                    }

                }
            }
        }
    }

    handleChange(event){
        setTimeout(((e)=>{
            this.setState({
                pageValue: parseInt(e.target.value)
            })})(event),0);
    }

    //整数验证
    clearNotNum(event){
        var obj=event.target||event.srcElement;
        obj.value = obj.value.replace(/[^\d]/g, "");
    }

    handleValue(){
        this.onChangeAndSetStates(this.state.pageValue);
    }

    render() {
        return <div className="Pager_Container">
            <ul className="Pager_Items">
                <li key="pagerPrev" className="Pager_Prev" onClick={()=>{this.onChangeAndSetStates(this.props.page-1)}}><a>上一页</a></li>
                {this.renderNumbers()}
                <li key="pagerNext" className="Pager_Next" onClick={()=>{this.onChangeAndSetStates(this.props.page+1)}}><a >下一页</a></li>
            </ul>
            <div className="Pager_Total Pager_Inline">{"共"+this.props.totalPage+"页， 到第"}</div>
            <input className="Pager_PageValue Pager_Inline"  onBlur={this.handleChange} onKeyUp={this.clearNotNum} />
            <div className="Pager_Inline">页</div>
            <ReButton reButtonClick={this.handleValue} reClass="Pager_Submit Pager_Inline">确定</ReButton>
        </div>
    }
}

Pager.propTypes = {
    page: React.PropTypes.number.isRequired,
    totalPage: React.PropTypes.number.isRequired,
    onChangePage: React.PropTypes.func.isRequired
};

module.exports = Pager;
